<template>
	<div class="product-list">
		<!--搜索表单-->
		<div class="common-seach-wrap">
			

			<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="接龙编号">
					<el-input size="small" clearable v-model="searchForm.tuan_no" placeholder="请输入接龙编号"></el-input>
				</el-form-item>

				<el-form-item label="接龙名称">
					<el-input size="small" clearable v-model="searchForm.tuan_name"  placeholder="请输入接龙名称"></el-input>
				</el-form-item>

				<el-form-item label="起始时间">
					<el-date-picker size="small" v-model="dateRange" type="daterange"
						value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期"></el-date-picker>
				</el-form-item>

				<!-- <el-form-item label="接龙发布状态">
					<el-select size="small" clearable v-model="searchForm.tuan_status" placeholder="请选择" @change="">
						<el-option label="全部" :value="0"></el-option>
						<el-option :label="i.label" :value="i.value" v-for="(i,index) in publishStatusOptions" :key="index"></el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item label="接龙状态">
					<el-select size="small" clearable v-model="searchForm.order_status" placeholder="请选择"  @change="">
						<el-option label="全部" :value="0"></el-option>
						<el-option v-for="(i, index) in orderStatusOptions" :key="index" :label="i.label"
							:value="i.value"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button size="small" type="primary" icon="Search" @click="onSubmit">查询</el-button>
				</el-form-item>

				<el-form-item>
					<el-button size="small" type="primary" icon="Plus" @click="addClick"
						v-auth="'/tuan/list/add'">发布接龙</el-button>
				</el-form-item>

				<el-form-item>
					<el-button size="small" type="primary"   @click="rowShipment" 
					 >发货管理
				</el-button> 
				</el-form-item>
				


				<!-- <el-form-item>
					<el-button icon="Download" type="primary">导出分层表</el-button>
				</el-form-item>

				<el-form-item>
					<el-button icon="Download" type="primary">导出汇总表</el-button>
				</el-form-item> -->

				<!-- <el-form-item>
					<el-button  size="small" type="danger" icon="Delete"
						:disabled="this.selectedRows.length == 0" @click="batchDel">批量删除</el-button>
				</el-form-item> -->
			</el-form>
		</div>

		

		<div class="product-content">
			<div class="table-wrap">
				<el-table ref="table" size="small" :data="tableData" border style="width: 100%" v-loading="loading"
					@selection-change="handleSelectionChange">
					>
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column type="index"  width="50" label="序号" align="center"  />
					<el-table-column prop="tuan_no" label="接龙编号" align="center"></el-table-column>
					<el-table-column prop="name" label="接龙名称" align="center"></el-table-column>
					<el-table-column prop="img" label="接龙主图" align="center">
						<template #default="scope">
							<img :src="scope.row.img" style="width: 50px; margin:auto">
						</template>
					</el-table-column>
					<el-table-column prop="time_start_str" label="接龙开始时间" align="center">
						<template #default="scope">
							<span>{{scope.row.time_start_str}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="time_end_str" label="接龙截止时间" align="center">
						<template #default="scope">
							<span>{{scope.row.time_end_str}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="time_state_str" label="接龙状态" align="center">
						<template #default="scope"> 
							<span>{{scope.row.status_str == '草稿'?'待发布':scope.row.time_state_str}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="status_str" label="接龙发布状态" align="center">
						<template #default="scope">
							<span>{{scope.row.status_str}}</span>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="350">
						<template #default="scope" >
							<div>

							
								<!-- <el-button  @click="onExportProduct(scope.row)"  link type="primary" size="small"
									>导出汇总表</el-button> -->

								<el-button @click="goOrder(scope.row)" link type="primary" size="small"
									>查看订单</el-button>

								<el-button v-if="(scope.row.status == 3&&scope.row.time_state_str !='已结束')||scope.row.status == '0'"  @click="editClick(scope.row)" link type="primary" size="small"
									>编辑</el-button>

								<el-button  v-if="scope.row.status == 1&&scope.row.time_state_str !='已结束'" @click="shareClick(scope.row)" link type="primary" size="small"
									>分销</el-button>

								<el-button @click="copyClick(scope.row)" link type="primary" size="small"
									>复刻</el-button>

								<!-- <el-button  link type="primary" size="small"
									>查看</el-button> -->

								<el-button v-if="(scope.row.status == 3&&scope.row.time_state_str !='已结束')||scope.row.status == 0"  @click="closetuan(scope.row.id, 0)" link
									type="primary" size="small" >{{scope.row.status == '0'?'发布':'开启'}}</el-button> 

								<el-button v-if="(scope.row.status == 1 && scope.row.status != 2)&&scope.row.time_state_str !='已结束'"  @click="closetuan(scope.row.id, 1)" link
									type="danger" size="small" >关闭</el-button> 

								<el-button v-if="scope.row.status_str == '草稿'|| scope.row.time_state_str == '已结束'" @click="delClick(scope.row)" link type="danger" size="small"
									>删除</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!--分页-->
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
				:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
				:total="totalDataNumber"></el-pagination>
		</div>

		<el-drawer v-model="isShareShow" title="选择分销商进行分销" class="drawer-view">
			<div class="">
				<el-checkbox-group v-model="shareIds">
					<el-checkbox v-for="(i,index) in shareOptions" :key="index" :label="i.key" >{{ i.label }}{{i.agency_remark  }}</el-checkbox>
				</el-checkbox-group>
			</div>
			<div class="drawer-footer">
				<el-button @click="closeDrawer">取消</el-button>
				<el-button type="primary" @click="sharetuan">
					确认
				</el-button>
			</div>
		</el-drawer>

	</div>
</template>

<script>
import {
	apiTuanList,
	apiCopyTuan,
	apiDelTuan,
	apiClosetuan,
	apiGetlinkusers,
	apiSharetuan
} from "@/api/tuan.js";
import { useUserStore } from "@/store";
const { token } = useUserStore();
export default {
	components: {},
	data() {
		return {

			activeName: "1",
			// 发货管理是否显示
			isShipmentShow: false,


			isShareShow: false,
			/*切换菜单*/
			activeName: "sell",
			/*切换选中值*/
			activeIndex: "0",
			/*是否正在加载*/
			loading: true,
			/*一页多少条*/
			pageSize: 10,
			/*一共多少条数据*/
			totalDataNumber: 0,
			/*当前是第几页*/
			curPage: 1,
			/*搜索参数*/
			searchForm: {
				tuan_name: "", //接龙名称
				tuan_no: "", //接龙编号
				order_status: '', //接龙订单状态
				tuan_status: '',   // 接龙发布状态
				begin_time:'',
				end_time:''
			},
			/*列表数据*/
			tableData: [],
			/*全部分类*/
			categoryList: [],
			supplier: [],
			/*统计数据*/
			product_count: {},
			// 列表选中项
			selectedRows: [],

			// 接龙订单状态
			orderStatusOptions: [
				{ label: "草稿", value: 40 },
                { label: "团购中", value: 10 },
                { label: "已关闭", value: 20 },
                { label: "已结束", value: 30 },
            ],

            // 接龙发布状态
            // publishStatusOptions: [
            //     { label: "待发布", value: 1 },
            //     { label: "已发布", value: 2 },
			// 	// { label: "已结束", value: 3 },
            // ],

			shareIds:[],
			shareOptions:[],
			shareRow:{},
			dateRange:[],
		};
	},
	created() {
		/*获取列表*/
		this.getList();
	},
	methods: {
		/*切换菜单*/
		handleClick(tab, event) {
			console.log(this.activeName)
			// console.log(tab)
			// console.log(event)
		},

		// 发货管理
		rowShipment(){

			this.$router.push({
				path: "/tuan/list/shippingManagement",
				// query: {
				// 	tuan_no: row.tuan_no,
				// },
			});
		},

		onExportProduct(row){
			console.log(row)
			let url = "/index.php/supplier/order.operate/exportTuanAllProduct";
			let params = {
				order_no:'',
				style_id:'',
				store_id:'',
				create_time:'',
				tuan_no: row.tuan_no,
				dataType:'all',
				token,
			}
			this.$filter.onExportFunc(url, params);
		},

		shareClick(row){
			this.shareRow = row
			this.getlinkusers()
		},

		closeDrawer(){
			this.shareIds = ''
			this.shareRow = {}
			this.isShareShow = false
		},

		// 分销商列表
		async getlinkusers() {
			let data = await apiGetlinkusers();
			if (data.code == 1) {
				this.shareOptions = data.data
				this.isShareShow = true
			} else {
				ElMessage.error(data.msg);
			}
		},


		// 关闭开启接龙
		async closetuan(id,type) {
			let params = {
				id: id,
				stat: type
			}
			let data = await apiClosetuan(params);
			if (data.code == 1) {
				this.getList()
			} else {
				ElMessage.error(data.msg);
			}
		},

		


		// 分销
		async sharetuan() {
			console.log(this.shareIds)
			if(this.shareIds.length == 0){
				ElMessage.error('请先选择分销商');
				return
			}
			let params = {
				ids:this.shareIds.length>0?this.shareIds.join(','):'',
				id:this.shareRow.id,
			}
			let data = await apiSharetuan(params);
			if (data.code == 1) {
				ElMessage.success(data.msg);
				this.closeDrawer()

			} else {
				ElMessage.error(data.msg);
			}
		},

		goOrder(e){
			this.$router.push({
				path: "/order/order/index",
				query: {
					tuan_no: e.tuan_no,
				},
			});
		},

		// 获取列表
		async getList() {
			let params = {
				...this.searchForm,
				page: this.curPage,
				list_rows: this.pageSize
			}
			params.begin_time = this.dateRange != null && this.dateRange.length>0? this.dateRange[0]:''
			params.end_time = this.dateRange != null && this.dateRange.length>0? this.dateRange[0]:''
			this.loading = true;
			let data = await apiTuanList(params);
			if (data.code == 1) {
				console.log(data.data.list)
				this.loading = false;
				this.tableData = data.data.list.data;
				this.totalDataNumber = data.data.list.total;
			} else {
				ElMessage.error(data.msg);
			}
		},

		// 删除接龙
		async delTuan(row) {
			let params = {
				id: row.id
			}
			this.loading = true;
			let data = await apiDelTuan(params);
			if (data.code == 1) {
				this.page = 1
				this.getList()
			} else {
				ElMessage.error(data.msg);
			}
		},
		
		//复刻接龙
		async copyTuan(row) {
			let params = {
				tuan_id:row.id
			}
			let data = await apiCopyTuan(params);
			if (data.code == 1) {
				this.page = 1
				this.getList()
			} else {
				ElMessage.error(data.msg);
			}
		},

		/*选择第几页*/
		handleCurrentChange(val) {
			let self = this;
			self.loading = true;
			self.curPage = val;
			self.getList();
		},

		/*每页多少条*/
		handleSizeChange(val) {
			this.pageSize = val;
			this.getList();
		},

		/*搜索查询*/
		onSubmit() {
			console.log(this.dateRange)
			this.curPage = 1;
			this.getList();
		},

		/*打开添加*/
		addClick() {
			this.$router.push("./add");
		},

		/*打开编辑*/
		editClick(row) {
			this.$router.push({
				path: "./edit",
				query: {
					row:JSON.stringify(row)
				}
			});
		},

		/*打开复制*/
		copyClick(row) {
			this.copyTuan(row)
		},

		/*删除*/
		delClick: function (row) {
			let self = this;
			ElMessageBox.confirm('确定删除该接龙么？', "提示", {
				type: "warning",
			}).then(() => {
				self.delTuan(row)
			});
		},
	},
};
</script>

<style>
.head-part {
	display: flex;
	align-items: center;
}

.el-form-item--small .el-form-item__content {
    line-height: 1 !important;
}

.drawer-view{

}

.drawer-footer {
	position: fixed;
	bottom: 10px;
	z-index: 9;
}


</style>
